<template>
  <div class="app-container">
    <el-tabs v-model="currentTab" @tab-click="changeTab" type="card" id="tabbar">
      <el-tab-pane label="全部" name=""></el-tab-pane>
      <el-tab-pane label="待办" name="PEND"></el-tab-pane>
      <el-tab-pane label="回退" name="RTN"></el-tab-pane>
      <el-tab-pane label="已分配" name="ASSN"></el-tab-pane>
      <el-tab-pane label="办结" name="DONE"></el-tab-pane>
    </el-tabs>

    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
             label-width="68px">
      <el-form-item label="" prop="orderId">
        <el-date-picker
            v-model="orderDatetimerange"
            type="datetimerange"
            range-separator="至"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleChangeCreatedDate"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始下单时间"
            end-placeholder="结束下单时间">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="" prop="origId">
        <el-input
            v-model="queryParams.origId"
            placeholder="初始工单编号"
            clearable />
      </el-form-item>

      <!--      <el-form-item label="" prop="origin">-->
      <!--        <el-select v-model="queryParams.origin" placeholder="工单来源" clearable>-->
      <!--          <el-option v-for="(item,index) in originList"-->
      <!--                     :key="item.value"-->
      <!--                     :label="item.label" :value="item.value" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <el-form-item label="" prop="cusComm">
        <el-input
            v-model="queryParams.cusComm"
            placeholder="小区"
            clearable />
      </el-form-item>
      <el-form-item label="" prop="issueCatIds">
        <el-cascader style="width:100%"
                     v-model="queryParams.issueCatIds"
                     :options="issCatOptions"
                     @change="handleChangeQueryIssCat" clearable filterable placeholder="工单类型"></el-cascader>
      </el-form-item>

      <el-form-item label="" prop="createUserRealName">
        <el-input
            v-model="queryParams.createUserRealName"
            placeholder="发起账号"
            clearable />
      </el-form-item>
      <el-form-item label="" prop="createUserDeptName">
        <el-input
            v-model="queryParams.createUserCompName"
            placeholder="所属公司"
            clearable />
      </el-form-item>

      <el-form-item label="" prop="asgnDeptId">
        <!--        <el-input-->
        <!--            v-model="queryParams.assgnUserDeptNames"-->
        <!--            placeholder="公司/站名/维检所"-->
        <!--            clearable />-->

        <treeselect :multiple="false" :flat="false"
                    v-model="queryParams.asgnDeptId" :options="deptOptions" :show-count="false"
                    placeholder="公司/站名/维检所"
                    :zIndex="9999" style="width: 200px;" />
      </el-form-item>

      <el-form-item label="" prop="assgnUserRealName">
        <el-input v-model="queryParams.assgnUserRealName" placeholder="站员姓名" clearable />
      </el-form-item>

      <el-form-item label="" prop="hetAcctNum">
        <el-input v-model="queryParams.hetAcctNum" placeholder="热户号" clearable />
      </el-form-item>

      <el-form-item label="" prop="hetAcctNum">
        <el-select v-model="queryParams.isHetAcctNum" placeholder="是否有热户号" clearable>
          <el-option v-for="(item,index) in logicList"
                     :key="item.value"
                     :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="isRevisit">
        <el-select v-model="queryParams.isRevisit" placeholder="是否回访" clearable>
          <el-option v-for="(item,index) in logicList"
                     :key="item.value"
                     :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="isTriSvcComm">
        <el-select v-model="queryParams.isTriSvcComm" placeholder="三供一业" clearable>
          <el-option v-for="(item,index) in logicList"
                     :key="item.value"
                     :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="工单状态" clearable>
          <el-option v-for="(item,index) in orderStatusList"
                     :key="item.value"
                     :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="rqdyStatus">
        <el-select v-model="queryParams.rqdyStatus" placeholder="申请延期" clearable>
          <el-option v-for="(item,index) in rqdyStatusList"
                     :key="item.value"
                     :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>


      <!--      <el-form-item label="" prop="">-->
      <!--        <el-select v-model="queryParams." placeholder="是否有效" clearable>-->
      <!--          <el-option label="全部" :value="0" />-->
      <!--          <el-option label="有效" :value="1" />-->
      <!--          <el-option label="无效" :value="2" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                   :loading="loading">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            v-if="0"
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="doOperate('addPop')"
            v-hasPermi="['wkorder:list:add']">新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
            type="primary"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handleExport"
            v-hasPermi="['wkorder:list:export']">导出
        </el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="orderList" :max-height="tableHeight">
      <!--@selection-change="handleSelectionChange" -->
      <!-- height="calc(100vh - 320px)"    max-height="calc(100vh - 320px)" -->
      <!--      <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column type="index" align="center" width="40"></el-table-column>
      <el-table-column label="下单时间" align="center" prop="createTime" min-width="160" sortable></el-table-column>
      <el-table-column label="初始编号" align="center" prop="origId" min-width="160" />
      <el-table-column label="工单编号" align="center" prop="pkId" min-width="120" />
      <el-table-column label="业主信息" align="center" prop="cusName" min-width="160"><!--:show-overflow-tooltip="true"-->
        <template slot-scope="scope">
          {{ scope.row.cus.cusName }}<br />{{ scope.row.cus.cusMobileNo }}
        </template>
      </el-table-column>
      <el-table-column label="主诉人信息" align="center" prop="reprName" min-width="160"><!--:show-overflow-tooltip="true"-->
        <template slot-scope="scope">
          {{ scope.row.repr.reprName }}<br />{{ scope.row.repr.reprMobileNo }}
        </template>
      </el-table-column>
      <el-table-column label="主诉人电话沟通" align="center" prop="repr.reprCallCount" min-width="120" />
      <el-table-column label="主诉人投诉" align="center" prop="repr.reprCompCount" min-width="120" />
      <el-table-column label="小区" align="center" prop="cus.cusComm" />
      <el-table-column label="业主地址" align="center" prop="cus.cusAddress" />
      <el-table-column label="工单来源" align="center" prop="origin">
        <template slot-scope="scope">
          <dict-tag :options="originList" :value="scope.row.origin" />
        </template>
      </el-table-column>
      <el-table-column label="工单类型" align="center" prop="issueCatNames" width="150" />
      <el-table-column label="截止时间" align="center" prop="dueTime" width="180" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tooltip v-if="scope.row.rqdyStatus=='APPR' && scope.row.delayTime"
                      class="item" effect="dark" :content="scope.row.delayTime" placement="top">
            <el-statistic
                ref="statistic"
                format="D天H小时m分钟s秒"
                :value="new Date(scope.row.delayTime)"
                title=""
                time-indices></el-statistic>
          </el-tooltip>

          <el-tooltip v-if="scope.row.dueTime"
                      class="item" effect="dark" :content="scope.row.dueTime" placement="top">
            <el-statistic
                ref="statistic"
                format="D天H小时m分钟s秒"
                :value="new Date(scope.row.dueTime)"
                title=""
                time-indices></el-statistic>
          </el-tooltip>

          <!--          <span v-if="scope.row.rqdyStatus=='APPR'">{{scope.row.delayTime}}</span>
                    <span v-else>{{scope.row.dueTime}}</span>-->
        </template>
      </el-table-column>
      <el-table-column label="工单问题" align="center" prop="issue" />
      <el-table-column label="发起账号" align="center" prop="createUserRealName" min-width="140" />
      <el-table-column label="所属公司" align="center" prop="createUserCompName" />
      <el-table-column label="公司/站名/维检所" align="center" prop="assgnUserDeptNames" min-width="160" />
      <!--      <el-table-column label="站号" align="center" prop="" />
            <el-table-column label="站员" align="center" prop="" />
            <el-table-column label="站点联系人" align="center" prop="" />-->
      <el-table-column label="申请延期" align="center" prop="rqdyStatus" min-width="140">
        <template slot-scope="scope">
          <dict-tag :options="rqdyStatusList" :value="scope.row.rqdyStatus" />
        </template>
      </el-table-column>
      <el-table-column label="回访" align="center" prop="isRevisit">
        <template slot-scope="scope">
          <span v-if="scope.row.isRevisit=='1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="三供一业" align="center" prop="cus.isTriSvcComm">
        <template slot-scope="scope">
          <span v-if="scope.row.cus.isTriSvcComm=='1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="工单状态" align="center" prop="orderStatus" width="90">
        <template slot-scope="scope">
          <dict-tag :options="orderStatusList" :value="scope.row.orderStatus" />
        </template>
      </el-table-column>
      <el-table-column label="是否有热户号" align="center" prop="isHetAcctNum">
        <template slot-scope="scope">
          <span v-if="scope.row.isHetAcctNum=='1'">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column label="热户号" align="center" prop="hetAcctNum" />

      <el-table-column label="操作" align="center"
                       width="120"
                       class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="doOperate('detail',scope.row)"
                     v-hasPermi="['wkorder:list:preview']">
            详情
          </el-button>

          <!--          <el-button type="text" size="small" @click="doOperate('edit',scope.row)" v-hasPermi="['wkorder:list:edit']">-->
          <!--            修改工单-->
          <!--          </el-button>-->

          <el-button type="text" size="small" @click="doOperate('feedback',scope.row)" v-if="0">工单反馈</el-button>

          <!--
             v-if=" (scope.row.workStatus=='1'
                       || scope.row.workStatus=='2'
                       || scope.row.workStatus=='21'
                       || scope.row.workStatus=='3'
                       || scope.row.workStatus=='9'
                       || scope.row.workStatus=='4'
                       || scope.row.workStatus=='11')
                       &&(scope.row.settlemStatus=='0')"
           -->
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                       v-if="hasRowBtnMore(scope.row)"><!--  v-hasPermi="['wkorder:list:edit']" -->
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <!--              <el-dropdown-item command="handleUpdate" icon="el-icon-edit-outline"-->
              <!--                                v-if="hasRowBtnEdit(scope.row)"-->
              <!--                                v-hasPermi="['wkorder:list:edit']">修改工单-->
              <!--              </el-dropdown-item>-->
              <el-dropdown-item command="handleAssign" icon="el-icon-user"
                                v-if="hasRowBtnAssign(scope.row)"
                                v-hasPermi="['wkorder:list:assign']">分配工单
              </el-dropdown-item>
              <!--              <el-dropdown-item command="handleConnect" icon="el-icon-phone-outline"-->
              <!--                                v-if="hasRowBtnConnect(scope.row)"-->
              <!--                                v-hasPermi="['wkorder:list:connect']">沟通解决-->
              <!--              </el-dropdown-item>-->
              <!--              <el-dropdown-item command="openSelectWorker" icon="el-icon-user"
                                              v-if=" scope.row.workStatus=='9'
                                              || scope.row.workStatus=='1'
                                              || scope.row.workStatus=='3'
                                              ||scope.row.workStatus=='11'"
                                              v-hasPermi="['wkorder:list:assignWorker']">安排师傅</el-dropdown-item>-->
              <el-dropdown-item command="handleCompFinish" icon="el-icon-circle-check"
                                v-if="hasRowBtnCompFinish(scope.row) "
                                v-hasPermi="['wkorder:list:compFinish']">直接办理
              </el-dropdown-item>
              <!--              <el-dropdown-item command="handleDelay" icon="el-icon-date"-->
              <!--                                v-if="hasRowBtnDelay(scope.row)"-->
              <!--                                v-hasPermi="['wkorder:list:delay']">申请延期-->
              <!--              </el-dropdown-item>-->
              <el-dropdown-item command="handleDelayAppr" icon="el-icon-date"
                                v-if="hasRowBtndDelayAppr(scope.row)"
                                v-hasPermi="['wkorder:list:delayAppr']">延期审核
              </el-dropdown-item>
              <!--              <el-dropdown-item command="handleRowCancel" icon="el-icon-close"-->
              <!--                                v-if="hasRowBtndCancel(scope.row)"-->
              <!--                                v-hasPermi="['wkorder:list:cancel']">撤销工单-->
              <!--              </el-dropdown-item>-->
              <!--              <el-dropdown-item command="handleReturn" icon="el-icon-refresh-left"-->
              <!--                                v-if="hasRowBtndReturn(scope.row)"-->
              <!--                                v-hasPermi="['wkorder:list:return']">退回工单-->
              <!--              </el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
          <!--          <el-button
                        v-if=" scope.row.workStatus=='9' || scope.row.workStatus=='1'"
                        type="text"
                        size="small"
                        icon="el-icon-plus"
                        @click="openSelectWorker(scope.row)"
                        v-hasPermi="['wkorder:list:assignWorker']"
                    >安排师傅</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination ref="pageRef"
                v-show="total>0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList" />

    <!-- 添加或修改话框 -->
    <el-dialog :title="title" :visible.sync="open" width="780px" append-to-body center :before-close="handleCancel">
      <div class="dialog-scroll">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px" :class=" !openIsEdit?'noEidt':'' "
                 v-loading="submitLoading">
          <el-input v-model="form.pkId" :readonly="true" type="hidden" />

          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="业主信息" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="12">
                    <el-form-item label="业主姓名:" prop="cus.cusName">
                      <el-input v-model="form.cus.cusName" :readonly="!openIsEdit" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="cusGender">
                      <template v-if="openIsEdit">
                        <el-radio v-model="form.cus.cusGender" label="1">先生</el-radio>
                        <el-radio v-model="form.cus.cusGender" label="2">女士</el-radio>
                      </template>
                      <template v-if="!openIsEdit">
                        <span v-if="form.cus.cusGender==1">先生</span>
                        <span v-else>女士</span>
                      </template>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-col :span="12">
                      <el-form-item label="联系电话" prop="cus.cusMobileNo">
                        <el-input v-model="form.cus.cusMobileNo" :readonly="!openIsEdit" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="三供一业小区" prop="isTriSvcComm">
                        <template v-if="openIsEdit">
                          <el-radio v-model="form.cus.isTriSvcComm" label="1">是</el-radio>
                          <el-radio v-model="form.cus.isTriSvcComm" label="0">否</el-radio>
                        </template>
                        <template v-if="!openIsEdit">
                          <span v-if="form.cus.isTriSvcComm==1">是</span>
                          <span v-else>否</span>
                        </template>
                      </el-form-item>
                    </el-col>


                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="业主地址" prop="cusAddress">
                      <!--                    <el-col :span="4">
                                            <el-input v-model="form.cus.cusProv" :readonly="true"/>
                                          </el-col>
                                          <el-col :span="4">
                                            <el-input v-model="form.cus.cusCity" :readonly="true"/>
                                          </el-col>-->
                      <el-col :span="6">
                        <el-select v-model="form.cus.cusDistCode"
                                   ref="distSelRef"
                                   :disabled="!openIsEdit"
                                   clearable filterable placeholder="请选择区"
                                   @change="handleChangeDist">
                          <el-option
                              v-for="item in distOptions"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"></el-option>
                        </el-select>
                      </el-col>
                      <el-col :span="8">
                        <el-input v-model="form.cus.cusComm" :readonly="!openIsEdit" placeholder="小区"></el-input>
                      </el-col>
                      <el-col :span="10">
                        <el-input v-model="form.cus.cusAddress" :readonly="!openIsEdit" placeholder="具体地址" />
                      </el-col>
                    </el-form-item>
                  </el-col>

                  <!--                <el-col :span="24">-->
                  <!--                  <el-col :span="12">-->
                  <!--                    &lt;!&ndash;        TODO 热户号还未设置            &ndash;&gt;-->
                  <!--                    <el-form-item label="热户号">-->
                  <!--                      <el-input v-model="form.cus.cusMobileNo" disabled />-->
                  <!--                    </el-form-item>-->
                  <!--                  </el-col>-->
                  <!--                </el-col>-->
                </el-main>
              </el-container>
            </el-col>

          </el-row>
          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="主诉人信息" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="12">
                    <el-form-item label="主诉人姓名:" prop="repr.reprName">
                      <el-input v-model="form.repr.reprName" :readonly="!openIsEdit" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="性别" prop="reprGender">
                      <template v-if="openIsEdit">
                        <el-radio v-model="form.repr.reprGender" label="1">先生</el-radio>
                        <el-radio v-model="form.repr.reprGender" label="2">女士</el-radio>
                      </template>
                      <template v-if="!openIsEdit">
                        <span v-if="form.repr.reprGender==1">先生</span>
                        <span v-else>女士</span>
                      </template>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="主诉人电话" prop="repr.reprMobileNo">
                      <el-input v-model="form.repr.reprMobileNo" :readonly="!openIsEdit" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-col :span="12">
                      <el-form-item label="主诉人其他" prop="repr.reprCallCount">
                        <el-input v-model="form.repr.reprCallCount" :readonly="!openIsEdit"
                                  placeholder="电话沟通次数（4158850）" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="" prop="repr.reprCompCount" label-width="0px">
                        <el-input v-model="form.repr.reprCompCount" :readonly="!openIsEdit" placeholder="投诉次数（12345）" />
                      </el-form-item>
                    </el-col>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>

          </el-row>

          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="服务信息" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="工单来源:" prop="workOrigin">
                      <el-select v-model="form.origin" placeholder="选中来源"
                                 clearable
                                 :disabled="!openIsEdit">
                        <el-option v-for="(item ,index) in originList"
                                   :key="item.value"
                                   :label="item.label"
                                   :value="item.value" />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <!--                <el-col :span="24">-->
                  <!--                  <el-form-item label="工单类型" prop="issueCatIds">-->
                  <!--                    &lt;!&ndash;props 实现 指定选项的值为选项对象的某个属性值&ndash;&gt;-->
                  <!--                    &lt;!&ndash; :props="{ value: 'pkId', label: 'catName', children: 'children' }"&ndash;&gt;-->
                  <!--                    <el-cascader style="width:100%" v-if="isSelectIssCat"-->
                  <!--                                 ref="issCatOptionsRef"-->
                  <!--                                 v-model="selIssCatArry"-->
                  <!--                                 :options="issCatOptions"-->
                  <!--                                 :disabled="!openIsEdit"-->
                  <!--                                 @change="handleChangeIssCat" clearable filterable placeholder="工单类型"></el-cascader>-->
                  <!--                  </el-form-item>-->
                  <!--                </el-col>-->

                  <el-col :span="24">
                    <el-form-item label="截至时间" prop="dueTime">
                      <el-date-picker :readonly="!openIsEdit"
                                      v-model="form.dueTime"
                                      type="datetime"
                                      placeholder="选择截至时间"
                                      @change="handleDateChange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="工单问题" prop="issue">
                      <el-input v-model="form.issue" :readonly="!openIsEdit"
                                placeholder="输入问题"
                                type="textarea"
                                :rows="2" />
                    </el-form-item>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>
          </el-row>

          <el-row :gutter="5" v-hasPermi="['wkorder:list:upload']">
            <el-col :span="24">
              <el-form-item label="工单附件" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="工单附件" prop="">
                      <el-upload
                          class="thmb-uploader"
                          :action="uploadAction"
                          :on-exceed="handleExceed"
                          :show-file-list="false"
                          :before-upload="beforeAvatarUpload"
                          :headers="headers"
                          :auto-upload="true" :file-list="fileList"
                          :on-success="handleSuccessImg"
                          :on-progress="handleProcessImg"
                          :on-remove="handleRemove"
                          accept=".jpg,.jpeg,.png,.gif"><!-- accept="image/jpg,image/png,image/jpeg" -->
                        <div v-if="form.imgList && form.imgList.length>0">
                          <img v-if="form.imgList[0].imgPath" :src="form.imgList[0].imgPath" class="thmb-img ">
                        </div>
                        <i v-else class="el-icon-plus thmb-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>
          </el-row>

          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="工单备注" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="是否回访" prop="isRevisit">
                      <template v-if="openIsEdit">
                        <el-radio v-model="form.isRevisit" label="1">是</el-radio>
                        <el-radio v-model="form.isRevisit" label="0">否</el-radio>
                      </template>
                      <template v-if="!openIsEdit">
                        <span v-if="form.isRevisit==1">是</span>
                        <span v-else>否</span>
                      </template>
                    </el-form-item>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>
          </el-row>

          <el-row :gutter="5" id="assgnRowRef">
            <!--          <el-col :span="24" >
                        <el-form-item label="分配工单" class="group-title"></el-form-item>
                      </el-col>-->
            <el-col :span="24">
              <el-container>
                <!--              <el-main class="grop-item-main">-->
                <el-col :span="24">
                  <el-form-item label="接单公司" prop="asgnDeptIds">
                    <treeselect v-if="!openIsAssign" :multiple="true" :flat="true"
                                v-model="asgnDeptIds" :options="deptOptions" :show-count="true"
                                placeholder="选择所属公司" :disabled="!openIsEdit"
                                :zIndex="9999"
                                @select="handleSelectDeptTree" />
                    <treeselect v-else :multiple="true" :flat="true"
                                v-model="asgnDeptIds" :options="deptOptions" :show-count="true"
                                placeholder="选择所属公司"
                                :zIndex="9999"
                                @select="handleSelectDeptTree" />
                    <!--                    <el-cascader style="width:100%" v-if="isSelDeptOptions"
                                                     ref="deptOptionsRef"
                                                     v-model="selDeptArry"
                                                     :options="deptOptions"
                                                     :disabled="!openIsEdit"
                                                     @change="handleChangeDeptOptions" clearable filterable  placeholder="选择所属公司"></el-cascader>-->
                  </el-form-item>
                </el-col>
                <!--              </el-main>-->
              </el-container>
            </el-col>
          </el-row>


        </el-form>

        <el-form ref="gsForm" v-if="openIsConnect"
                 :model="gsForm" label-width="100px" v-loading="submitLoading">
          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="沟通解决" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="结果描述" prop="descp">
                      <el-input v-model="gsForm.descp"
                                placeholder="与主诉人沟通解决结果描述"
                                type="textarea"
                                :rows="2" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="解决时间" prop="handleTime">
                      <el-date-picker
                          v-model="gsForm.handleTime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择解决时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>
          </el-row>
        </el-form>
        <el-form ref="compForm" v-if="openIsCompFinish"
                 :model="compForm" label-width="100px" v-loading="submitLoading">
          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="直接办理" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="工单反馈" prop="descp">
                      <el-input v-model="compForm.descp"
                                placeholder="输入工单反馈"
                                type="textarea"
                                :rows="2" />
                    </el-form-item>
                  </el-col>

                </el-main>
              </el-container>
            </el-col>

            <!--            <el-col :span="24">-->
            <!--              <el-container>-->
            <!--                <el-main class="grop-item-main">-->
            <!--                  <el-col :span="24">-->
            <!--                    <el-form-item label="反馈照片" prop="">-->
            <!--                      <el-upload-->
            <!--                          class="thmb-uploader"-->
            <!--                          :action="uploadAction"-->
            <!--                          :on-exceed="handleExceed"-->
            <!--                          :show-file-list="false"-->
            <!--                          :before-upload="beforeAvatarUpload"-->
            <!--                          :headers="headers"-->
            <!--                          :auto-upload="true"-->
            <!--                          :on-success="handleSuccessImg"-->
            <!--                          :on-progress="handleProcessImg"-->
            <!--                          :on-remove="handleRemove">&lt;!&ndash; accept="image/jpg,image/png,image/jpeg" &ndash;&gt;-->
            <!--                        <img v-if="false" :src="form.prodImg" class="thmb-img ">-->
            <!--                        <i v-else class="el-icon-plus thmb-uploader-icon"></i>-->
            <!--                      </el-upload>-->
            <!--                    </el-form-item>-->
            <!--                  </el-col>-->
            <!--                </el-main>-->
            <!--              </el-container>-->
            <!--            </el-col>-->

          </el-row>
        </el-form>


        <el-form ref="dyForm" v-if="openIsDelay"
                 :model="dyForm" label-width="100px" v-loading="submitLoading">
          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="延期申请" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="申请原因" prop="descp">
                      <el-input v-model="dyForm.descp"
                                placeholder="请简述原因"
                                type="textarea"
                                :rows="2" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="延期时间" prop="handleTime">
                      <el-date-picker
                          v-model="dyForm.handleTime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择延期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>
          </el-row>
        </el-form>

        <el-form ref="dyForm" v-if="openIsDelayAppr"
                 :model="dyApprForm" label-width="100px" v-loading="submitLoading">
          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="延期申请" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="申请原因" prop="descp">
                      <el-input v-model="dyApprForm.descp"
                                :readonly="true"
                                placeholder="请简述原因"
                                type="textarea"
                                :rows="2" />
                    </el-form-item>
                  </el-col>

                  <el-col :span="24">
                    <el-form-item label="延期时间" prop="handleTime">
                      <el-date-picker
                          v-model="dyApprForm.handleTime"
                          :readonly="true"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          type="datetime"
                          placeholder="选择延期时间">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-main>
              </el-container>
            </el-col>
          </el-row>
        </el-form>

        <el-form ref="rtnForm" v-if="openIsReturn"
                 :model="rtnForm" label-width="100px" v-loading="submitLoading">
          <el-row :gutter="5">
            <el-col :span="24">
              <el-form-item label="回退原因" class="group-title"></el-form-item>
            </el-col>
            <el-col :span="24">
              <el-container>
                <el-main class="grop-item-main">
                  <el-col :span="24">
                    <el-form-item label="回退原因" prop="descp">
                      <el-input v-model="rtnForm.descp"
                                placeholder="请简述原因"
                                type="textarea"
                                :rows="2" />
                    </el-form-item>
                  </el-col>

                </el-main>
              </el-container>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button v-if="openIsEdit" type="primary" @click="onSubmit()" :loading="submitLoading">提 交</el-button>
        <el-button v-if="openIsAssign" type="primary" @click="onAssign()" :loading="submitLoading">分 配</el-button>
        <el-button v-if="openIsConnect" type="primary" @click="onConnect()" :loading="submitLoading">提交沟通结果</el-button>
        <el-button v-if="openIsCompFinish" type="primary" @click="onCompFinish()" :loading="submitLoading">完成
        </el-button>
        <el-button v-if="openIsDelay" type="primary" @click="onDelayReq()" :loading="submitLoading">提交延期申请</el-button>

        <el-button v-if="openIsDelayAppr" type="primary" @click="onDelayAppr('1')" :loading="submitLoading">通过
        </el-button>
        <el-button v-if="openIsDelayAppr" type="danger" @click="onDelayAppr('0')" :loading="submitLoading">不通过
        </el-button>

        <el-button v-if="openIsReturn" type="danger" @click="onReturn()" :loading="submitLoading">退 回</el-button>
        <el-button @click="handleCancel" :loading="submitLoading">关 闭</el-button>

        <el-button v-if="form.pkId" @click="onViewHandleList(form.pkId)" type="primary" :loading="submitLoading"
                   v-hasPermi="['wkorder:list:viewHandle']">查看进度
        </el-button>
      </div>
    </el-dialog>


    <el-dialog title="工单进度" :visible.sync="isOpenHandleList" width="680px" append-to-body center
               :before-close="handleCancelViewHandleList">
      <el-table :data="handleList">
        <el-table-column label="时间" align="center" prop="createTime" />
        <el-table-column label="操作人" align="center" prop="createUserRealName" />
        <el-table-column label="操作" align="center" prop="handleType">
          <template slot-scope="scope">
            <dict-tag :options="handleTypeList" :value="scope.row.handleType" />
          </template>
        </el-table-column>
        <el-table-column label="描述" align="center" prop="descp" />
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancelViewHandleList">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="addForm.pkId?'编辑工单':'新建工单'" :visible.sync="showAddPop" width="980px" append-to-body center>
      <el-form :model="addForm" label-width="110px" class="dialog-content dialog-scroll">
        <div class="title">业主信息</div>
        <div class="flex-row center-x">
          <el-form-item label="业主姓名：" class="match-parent">
            <el-input v-model="addForm.cus.cusName"></el-input>
          </el-form-item>
          <el-form-item label=" " prop="cusGender" class="match-parent">
            <template>
              <el-radio v-model="addForm.cus.cusGender" label="1">先生</el-radio>
              <el-radio v-model="addForm.cus.cusGender" label="2">女士</el-radio>
            </template>
          </el-form-item>
        </div>

        <el-form-item label="联系电话：">
          <el-input v-model="addForm.cus.cusMobileNo"></el-input>
        </el-form-item>

        <div class="flex-row center-x">
          <el-form-item label="业主地址：" style="flex: 4">
            <div class="flex-row center-x">
              <!--              <el-select v-model="addForm.cus.cusProvCode"-->
              <!--                         ref="provinceSelRel"-->
              <!--                         clearable filterable placeholder="请选择省"-->
              <!--                         @change="handleChangeProvince" class="match-parent">-->
              <!--                <el-option-->
              <!--                    v-for="item in provinceOptions"-->
              <!--                    :key="item.value"-->
              <!--                    :label="item.label"-->
              <!--                    :value="item.value"></el-option>-->
              <!--              </el-select>-->
              <!--              <el-select v-model="addForm.cus.cusCityCode"-->
              <!--                         ref="citySelRef"-->
              <!--                         clearable filterable placeholder="请选择市"-->
              <!--                         @change="handleChangeCity" class="match-parent">-->
              <!--                <el-option-->
              <!--                    v-for="item in cityOptions"-->
              <!--                    :key="item.value"-->
              <!--                    :label="item.label"-->
              <!--                    :value="item.value"></el-option>-->
              <!--              </el-select>-->
              <el-select v-model="addForm.cus.cusDistCode"
                         ref="distSelRef"
                         clearable filterable placeholder="请选择区"
                         @change="handleChangeDist" class="match-parent">
                <el-option
                    v-for="item in distOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"></el-option>
              </el-select>
              <el-input v-model="addForm.cus.cusComm" placeholder="小区" class="match-parent" style="margin-left: 5px" />
              <el-input v-model="addForm.cus.cusAddress" placeholder="具体地址" class="match-parent"
                        style="margin-left: 5px" />
            </div>
          </el-form-item>
          <el-form-item label=" " label-width="20px" prop="isTriSvcComm" style="flex: 1;">
            <template>
              <el-checkbox v-model="isTriSvcCommBool">三供一业小区</el-checkbox>
            </template>
          </el-form-item>
        </div>
        <!-- TODO 热户号还未获取-->
        <el-form-item label="热户号：">
          <el-input v-model="addForm.cus.hetAcctNum" autocomplete="off"></el-input>
        </el-form-item>

        <div class="flex-row center-x">
          <el-form-item label="主诉人：" class="match-parent">
            <el-input v-model="addForm.repr.reprName" placeholder="输入姓名"></el-input>
          </el-form-item>
          <el-form-item label=" " prop="" class="match-parent">
            <template>
              <el-radio v-model="addForm.repr.reprGender" label="1">先生</el-radio>
              <el-radio v-model="addForm.repr.reprGender" label="2">女士</el-radio>
            </template>
          </el-form-item>
        </div>

        <el-form-item label="主诉人电话：" required>
          <el-input v-model="addForm.repr.reprMobileNo"></el-input>
        </el-form-item>

        <el-form-item label="主诉人其他：">
          <div class="flex-row center-x">
            <el-input v-model="addForm.repr.reprCallCount" placeholder="电话沟通次数（4158850）" type="number" min="0"
                      @input="handleInput($event,'')" class="match-parent" />
            <el-input v-model="addForm.repr.reprCompCount" placeholder="投诉次数（12345）" type="number" min="0"
                      @input="handleInput($event,'')" class="match-parent" style="margin-left: 5px" />
          </div>
        </el-form-item>

        <div class="title">服务信息</div>
        <el-form-item label="工单来源:" prop="workOrigin">
          <el-select v-model="addForm.origin" placeholder="选中来源" clearable>
            <el-option v-for="(item ,index) in originList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="截止时间：" prop="dueTime">
          <el-date-picker v-model="addForm.dueTime"
                          type="datetime"
                          placeholder="选择截至时间"
                          @change="handleDateChange">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="工单问题" prop="issue">
          <el-input v-model="addForm.issue" placeholder="输入问题" type="textarea" :rows="3" />
        </el-form-item>

        <div class="item-files">
          <div class="title title-upload">工单附件</div>
          <div class="files-p" style="margin-left: 40px">
            <div v-for="(item, index) in fileObject.fileList" class="file">
              <el-image class="img" :src="item.imgPath"
                        :preview-src-list="fileObject.fileList.map(it => it.imgPath)"
                        v-if="item.fileType=='image'"></el-image>
              <div v-else class="flex center-flex" style="border: 1px dashed #D9D9D9;width: 100px;height: 100px">
                <i class="el-icon-picture-outline"></i>
                <div>其他文件</div>
              </div>
              <i class="el-icon-error ic-delete" @click.stop="deletePic(index,'fileList')"></i>
            </div>
            <el-upload
                v-if="fileObject.fileList.length<=10"
                class="thmb-uploader"
                :action="uploadAction"
                :on-exceed="handleExceed"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
                :auto-upload="true"
                :limit="10"
                :multiple="true"
                :on-success="(response, file, fileList)=>handleSuccessImg(response, file, fileList,'fileList')"
                :on-progress="handleProcessImg"
                :on-remove="handleRemove"
                accept=".jpg,.jpeg,.png,.gif,.doc,.docx,.mp4,.pdf">
              <i class="el-icon-plus thmb-uploader-icon"></i>
            </el-upload>
          </div>
        </div>

        <div class="title">工单备注</div>
        <el-form-item label="是否回访：" prop="isRevisit">
          <template>
            <el-radio v-model="addForm.isRevisit" label="1">是</el-radio>
            <el-radio v-model="addForm.isRevisit" label="0">否</el-radio>
          </template>
        </el-form-item>

        <div class="title">分配工单</div>
        <el-form-item label="接单公司" prop="asgnDeptIds">
          <treeselect :multiple="true" :flat="false"
                      v-model="asgnDeptList" :options="deptOptions" :show-count="false"
                      placeholder="选择所属公司"
                      :zIndex="9999" value-format="object"
                      @select="handleSelectDeptTree" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddPop=false">取消</el-button>
        <el-button type="primary" @click="addNewOrder" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="feedbackInit.title" :visible.sync="showAddFeedbackPop" width="680px" append-to-body center>
      <el-form :model="feedbackForm" label-width="110px" class="dialog-content">
        <div class="title">{{ feedbackInit.panelTitle }}</div>
        <el-input v-model="feedbackForm.descp" :placeholder="feedbackInit.panelPlaceholder" type="textarea"
                  :rows="5" />

        <div class="title">上传照片</div>
        <div class="flow">
          <div v-for="item in fileObject.feedbackImgList">
            <img :src="item.imgPath" class="thmb-img">
          </div>
          <el-upload
              v-if="fileObject.feedbackImgList.length<=10"
              class="thmb-uploader"
              :action="uploadAction"
              :on-exceed="handleExceed"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :headers="headers"
              :auto-upload="true"
              :limit="10"
              :multiple="true"
              :on-success="(response, file, fileList)=>handleSuccessImg(response, file, fileList,'feedbackImgList')"
              :on-progress="handleProcessImg"
              :on-remove="handleRemove"
              accept=".jpg,.jpeg,.png,.gif">
            <i class="el-icon-plus thmb-uploader-icon"></i>
          </el-upload>
        </div>

        <div v-if="!feedbackType">
          <div class="title">反馈附件</div>
          <div class="flow">
            <div v-for="item in fileObject.feedbackAttachList">
              <img :src="item.imgPath" class="thmb-img">
            </div>
            <el-upload
                v-if="fileObject.feedbackAttachList.length<=10"
                class="thmb-uploader"
                :action="uploadAction"
                :on-exceed="handleExceed"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
                :auto-upload="true"
                :limit="10"
                :multiple="true"
                :on-success="(response, file, fileList)=>handleSuccessImg(response, file, fileList,'feedbackAttachList')"
                :on-progress="handleProcessImg"
                :on-remove="handleRemove"
                accept=".pdf,.doc,.docx,.mp4">
              <i class="el-icon-plus thmb-uploader-icon"></i>
            </el-upload>
          </div>
        </div>

        <div v-if="feedbackType==='handleDirectly'">
          <div class="title">解决时间</div>
          <el-date-picker
              v-model="feedbackForm.handleTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择解决时间">
          </el-date-picker>
        </div>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="addFeedback" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="申请延期" :visible.sync="showAddDelayPop" width="680px" append-to-body center>
      <el-form :model="delayForm" label-width="110px" class="dialog-content">
        <el-form-item label="延期原因：">
          <el-input v-model="delayForm.descp" placeholder="请简述原因" type="textarea" :maxlength="100" :rows="5"
                    show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="延期时间：">
          <el-date-picker
              v-model="delayForm.handleTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetime"
              placeholder="选择延期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="addDelay" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审核申请" :visible.sync="showAuditPop" width="680px" append-to-body center>
      <el-form :model="delayForm" label-width="110px" class="dialog-content">
        <el-form-item label="延期原因：">
          <el-input v-model="delayForm.descp" type="textarea" :rows="5" readOnly disabled></el-input>
        </el-form-item>
        <el-form-item label="延期时间：">
          <el-input v-model="delayForm.handleTime" readOnly disabled></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="danger" @click="doOperate('audit_no')" :loading="submitLoading">不通过</el-button>
        <el-button type="primary" @click="doOperate('audit_pass')" :loading="submitLoading">通过</el-button>
      </div>
    </el-dialog>

    <el-dialog title="工单详情" :visible.sync="showDetailPop" width="980px" append-to-body center>
      <div class="dialog-content dialog-scroll">
        <!--    业主信息    -->
        <div v-if="0">
          <div class="title">业主信息</div>
          <div class="item">
            <span>业主姓名：</span>
            <div>{{ orderInfo.cus.cusName }} {{ orderInfo.cus.cusGender == 1 ? '先生' : '女士' }}</div>
          </div>
          <div class="item">
            <span>联系电话：</span>
            <div>{{ orderInfo.cus.cusMobileNo }}</div>
          </div>
          <div class="item">
            <span>业主地址：</span>
            <div>
              {{ orderInfo.cus.cusProv }}
              {{ orderInfo.cus.cusCity }}
              {{ orderInfo.cus.cusDist }}
              {{ orderInfo.cus.cusComm }}
              {{ orderInfo.cus.cusAddress }}
            </div>
          </div>
          <div class="item">
            <span>热户号：</span>
            <div>{{ orderInfo.cus.hetAcctNum }}</div>
          </div>
          <div class="item">
            <span>主诉人：</span>
            <div>{{ orderInfo.repr.reprName }} {{ orderInfo.repr.reprGender == 1 ? '先生' : '女士' }}</div>
          </div>
          <div class="item">
            <span>主诉人电话：</span>
            <div>{{ orderInfo.repr.reprMobileNo }}</div>
          </div>
        </div>

        <!--    服务信息    -->
        <div v-if="0">
          <div class="title">服务信息</div>
          <div class="item">
            <span>工单来源：</span>
            <div>{{ orderInfo.originName }}</div>
          </div>
          <div class="item">
            <span>工单类型：</span>
            <div>{{ orderInfo.issueCatNames }}</div>
          </div>
          <div class="item">
            <span>截止时间：</span>
            <div>{{ orderInfo.dueTime }}</div>
          </div>
          <div class="item">
            <span>工单问题：</span>
            <div>{{ orderInfo.issue }}</div>
          </div>
          <div class="item item-files">
            <span>问题照片：</span>
            <div class="files-p">
              <div v-for="file in orderInfo.imgList" class="file">
                <img :src="file.imgPath" class="img">
              </div>
            </div>
          </div>
        </div>

        <!--    工单附件    -->
        <div v-if="0">
          <div class="title">工单附件</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>
        </div>

        <!--   运管工单详情     -->
        <div v-if="!!orderInfo.opspl">
          <div class="title">运管工单详细信息</div>
          <div class="item">
            <span>任务号：</span>
            <div>{{ orderInfo.opspl.taskNum }}</div>
          </div>
          <div class="item">
            <span>问题来源：</span>
            <div>{{ orderInfo.opspl.eventSrcName }}</div>
          </div>
          <div class="item">
            <span>问题类型：</span>
            <div>{{ orderInfo.opspl.eventTypeName }}</div>
          </div>
          <div class="item">
            <span>案卷类型：</span>
            <div>{{ orderInfo.opspl.recTypeName }}</div>
          </div>
          <div class="item">
            <span>大类名称：</span>
            <div>{{ orderInfo.opspl.mainTypeName }}</div>
          </div>
          <div class="item">
            <span>小类名称：</span>
            <div>{{ orderInfo.opspl.subTypeName }}</div>
          </div>
          <div class="item">
            <span>部件编号：</span>
            <div>{{ orderInfo.opspl.partCode }}</div>
          </div>
          <div class="item">
            <span>立案条件：</span>
            <div>{{ orderInfo.opspl.newInstCondName }}</div>
          </div>
          <div class="item">
            <span>问题描述：</span>
            <div>{{ orderInfo.opspl.eventDesc }}</div>
          </div>
          <div class="item">
            <span>地址描述：</span>
            <div>{{ orderInfo.opspl.address }}</div>
          </div>
          <div class="item">
            <span>所属区域：</span>
            <div>{{ orderInfo.opspl.districtName }}</div>
          </div>
          <div class="item">
            <span>所属街道：</span>
            <div>{{ orderInfo.opspl.streetName }}</div>
          </div>
          <div class="item">
            <span>所属社区：</span>
            <div>{{ orderInfo.opspl.communityName }}</div>
          </div>
          <div class="item">
            <span>举报人：</span>
            <div>{{ orderInfo.opspl.humanName }}</div>
          </div>
          <div class="item">
            <span>举报电话：</span>
            <div>{{ orderInfo.opspl.cellphone }}</div>
          </div>
          <div class="item">
            <span>是否公开：</span>
            <!--            <div>{{ orderInfo.opspl. }}</div>-->
          </div>
          <!--          <div class="item">-->
          <!--            <span>是否回访：</span>-->
          <!--            <div>{{ orderInfo.opspl. }}</div>-->
          <!--          </div>-->
          <div class="item">
            <span>热户号：</span>
            <div>{{ orderInfo.cus.hetAcctNum }}</div>
          </div>
        </div>

        <!--    工单备注    -->
        <div>
          <div class="title">工单备注</div>
          <div class="item">
            <span>是否回访：</span>
            <div>{{ orderInfo.isRevisit == 1 ? '是' : '否' }}</div>
          </div>
        </div>

        <div class="divider"></div>

        <!--    总公司备注    -->
        <div v-if="0">
          <div class="title">总公司备注</div>
          <div class="remark-co"></div>

          <div class="title">总公司上传图片</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>
          <div class="title">总公司反馈附件</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>
        </div>

        <!--    分公司备注    -->
        <div v-if="0">
          <div class="title">分公司备注</div>
          <div class="item">
            <span>备注：</span>
            <div></div>
          </div>

          <div class="title">分公司上传照片</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>

          <div class="title">分公司反馈附件</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>
        </div>

        <!--        -->
        <div v-if="feedbackList&&feedbackList.length>0">
          <div v-for="item in feedbackList" style="border-bottom: 1px solid #F5F5F5;padding-bottom: 50px">
            <div class="title">{{ item.createCompName }}</div>
            <div class="item">
              <span>工单反馈：</span>
              <div>{{ item.descp }}</div>
            </div>

            <div class="item item-files" style="margin-top: 30px">
              <div class="files-p">
                <div v-for="pic in item.picList" class="file">
                  <el-image :src="pic.imgPath" class="img"
                            :preview-src-list="item.picList.map(it => it.imgPath)"></el-image>
                </div>
              </div>
            </div>

            <div class="item item-files" v-if="item.otherList.length>0" style="margin-top: 30px">
              <div class="files-p">
                <div v-for="pic in item.otherList" class="file-download">
                  <img :src="pic.imgPath" class="img">
                  <a :href="pic.imgPath" :download="pic.fileName" target="_blank">下载</a>
                </div>
              </div>
            </div>
          </div>
        </div>


        <!--    师傅备注    -->
        <div v-if="0">
          <div class="title">师傅备注</div>
          <div class="item">
            <span>工单反馈：</span>
            <div></div>
          </div>

          <div class="title">现场上传照片</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>

          <div class="title">师傅反馈视频</div>
          <div class="item item-files">
            <div class="files-p">
              <div v-for="i in 4" class="file">
                <img src="" class="img">
              </div>
            </div>
          </div>
        </div>

        <!--    热户号异常上报    -->
        <div v-if="isShowHetAcctInfo">
          <div class="title">热户号异常上报</div>
          <div class="flex-row center-x" style="margin-bottom: 20px">
            <div class="match-parent">
              <div style="margin-bottom: 10px;color: #333333;">原信息</div>
              <div v-if="!hetAcctInfo.cusHist"
                   style="border: 1px solid #E1E1E1;border-radius: 8px;height: 130px;line-height: 120px;text-align: center">
                未匹配到原信息
              </div>
              <div v-else style="border: 1px solid #E1E1E1;border-radius: 8px;padding-top: 10px;">
                <div class="item" style="font-size: 12px">
                  <span>热户号：</span>
                  <div>{{ hetAcctInfo.cusHist.hetAcctNum }}</div>
                </div>
                <div class="item" style="font-size: 12px">
                  <span>业主姓名：</span>
                  <div>{{ hetAcctInfo.cusHist.cusName }}</div>
                </div>
                <div class="item" style="font-size: 12px">
                  <span>联系电话：</span>
                  <div>{{ hetAcctInfo.cusHist.cusMobileNo }}</div>
                </div>
                <div class="item" style="font-size: 12px">
                  <span>业主地址：</span>
                  <div>
                    {{ hetAcctInfo.cusHist.cusProv }}
                    {{ hetAcctInfo.cusHist.cusCity }}
                    {{ hetAcctInfo.cusHist.cusDist }}
                    {{ hetAcctInfo.cusHist.cusComm }}
                    {{ hetAcctInfo.cusHist.cusAddress }}
                    {{ hetAcctInfo.cusHist.isTriSvcComm == 1 ? '三供一业小区' : '' }}
                  </div>
                </div>
              </div>
            </div>
            <i class="el-icon-d-arrow-right" style="margin: 0 30px"></i>
            <div class="match-parent">
              <div style="margin-bottom: 10px;color: #333333;">现信息</div>
              <div style="border: 1px solid #E1E1E1;border-radius: 8px;padding-top: 10px;">
                <div class="item" style="font-size: 12px">
                  <span>热户号：</span>
                  <div>{{ hetAcctInfo.cus.hetAcctNum }}</div>
                </div>
                <div class="item" style="font-size: 12px">
                  <span>业主姓名：</span>
                  <div>{{ hetAcctInfo.cus.cusName }}</div>
                </div>
                <div class="item" style="font-size: 12px">
                  <span>联系电话：</span>
                  <div>{{ hetAcctInfo.cus.cusMobileNo }}</div>
                </div>
                <div class="item" style="font-size: 12px">
                  <span>业主地址：</span>
                  <div>
                    {{ hetAcctInfo.cus.cusProv }}
                    {{ hetAcctInfo.cus.cusCity }}
                    {{ hetAcctInfo.cus.cusDist }}
                    {{ hetAcctInfo.cus.cusComm }}
                    {{ hetAcctInfo.cus.cusAddress }}
                    {{ hetAcctInfo.cus.isTriSvcComm == 1 ? '三供一业小区' : '' }}
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!--    其他反馈    -->
        <div v-if="0">
          <div class="title">其他反馈</div>
          <div class="item">
            <span>工单反馈：</span>
            <div></div>
          </div>
        </div>

        <div class="divider" v-if="0"></div>

        <!--    工单流转    -->
        <div v-if="0">
          <div class="title">工单流转</div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel" :loading="submitLoading">关 闭</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">工单分配</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">直接办理-提交</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">申请延期</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">修改工单</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">直接办理</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">撤销工单</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">完成工单</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">有效工单</el-button>
        <el-button type="primary" @click="doOperate('')" :loading="submitLoading" v-if="0">无效工单</el-button>
        <el-button @click="onViewHandleList(orderInfo.pkId)" type="primary" :loading="submitLoading"
                   v-hasPermi="['wkorder:list:viewHandle']">查看进度
        </el-button>
      </div>
    </el-dialog>

    <el-dialog title="分配工单" :visible.sync="showAssignPop" width="680px" append-to-body center>
      <el-form :model="addForm" label-width="110px" class="dialog-content">
        <el-form-item label="接单公司" prop="asgnDeptIds">
          <treeselect :multiple="true" :flat="false"
                      v-model="asgnDeptList" :options="deptOptions" :show-count="false"
                      placeholder="选择所属公司"
                      :zIndex="9999" value-format="object" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="doOperate('assign')" :loading="submitLoading">提交</el-button>
      </div>
    </el-dialog>

  </div>

</template>
<script>
import "@/style/wkOrderList.scss";
import "@/style/customer.scss";
import { getTree as getWkoIssCatTree } from "@/api/wkorder/wkoIssCat.js";
import { getDistListByCityCode } from "@/api//pub/pubRegion";
import {
  updateWkOrder, listOrder, getOrderById, assignWkOrder
  , gsHandle, compHandle, dyrqHandle, getDyRqHandleNew
  , dyApprPassHandle, dyApprNoPassHandle
  , cancelHandle, returnHandle, getHandleList,
  getWorkOrderHandleCfin,
  getWorkOrderHetAcctHumExpCmp,
  getAsgnDeptListByOrderId,
} from '@/api/wkorder/wkorder.js';
import { getTree as getDetpTree } from '@/api/system/dept.js';

import { deptCompTreeCurUser } from "@/api/system/user";
import { uploadFile } from "@/api/upload";


import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import { getToken, getSystem } from '@/utils/auth'

export default {

  name: "Wkorder_list_manager", //此name需要和func表的func_path匹配，否则再次回到已打开的此页面时，会触发页面刷新（如：页签切换）
  components: { Treeselect },
  data () {
    return {
      feedbackList: [],
      deptList: [],
      currentTab: '',
      showAddPop: false,
      isTriSvcCommBool: false,
      addForm: {
        cus: {
          cusName: "", // 业主姓名
          cusGender: "", // "性别：1=男，2=女",
          cusMobileNo: "", //  "联系电话",
          isTriSvcComm: "", //  "三供一业小区 1=是，0=否",
          cusProv: "", //  "业主地址：省",
          cusProvCode: "", //  "业主地址：省编码",
          cusCity: "", // "业主地址：市",
          cusCityCode: "", // "业主地址：市编码",
          cusDist: "", //  "业主地址：区",
          cusDistCode: "", //  "业主地址：区编码",
          cusComm: "", // "小区",
          cusAddress: "", // "详细地址",
          hetAcctNum: "", // "热户号，目前先手工录入，等待客户提供查询接口"
        },
        repr: {
          reprName: "", // "主诉人姓名",
          reprGender: "", //  "主诉人姓名性别",
          reprMobileNo: "", //  "联系电话",
          reprCallCount: "", // "电话沟通次数",
          reprCompCount: "", //  "投诉次数"
        },
        origin: "",
        dueTime: "",
        issue: "",
        isRevisit: "", // 是否回访
        imgList: [
          /*{
            "imgPath": "附件地址",
            "fileType": "附件类型",
            "fileName": "附件名称"
      }*/
        ],
        asgnDeptList: [
          /*{
            "deptId": "接单单位的主键",
            "deptName": "接单单位名称"
          }*/
        ]
      },
      submitLoading: false,
      uploadAction: uploadFile,
      headers: {
        // Authorization: "Bearer " + getToken()
        'access-token': getToken(), // 让每个请求携带自定义token 请根据实际情况自行修改
        'system-key': getSystem()
      },
      fileList: [],
      asgnDeptList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        //createdDateStr:undefined,//下单时间
        crtDateStartStr: undefined,
        crtDateEndStr: undefined,
        origId: undefined,
        origin: "OPSPL",
        cusComm: undefined,
        issueCatIds: undefined,
        createUserRealName: undefined,
        createUserCompName: undefined,
        asgnDeptId: undefined,
        assgnUserRealName: undefined,
        hetAcctNum: undefined,
        isHetAcctNum: undefined,
        isRevisit: undefined,
        isTriSvcComm: undefined,
        orderStatus: undefined,
        rqdyStatus: undefined,
      },
      orderDatetimerange: undefined,//下单日期范围
      feedbackType: '',
      feedbackInit: {
        title: '反馈',
        panelTitle: '备注',
        panelPlaceholder: '请输入备注',
      },
      showAddFeedbackPop: false,
      feedbackForm: {
        orderId: '',
        descp: '',
        handleTime: '',
        imgList: [],
      },
      fileObject: {
        feedbackImgList: [],
        feedbackAttachList: [],
        fileList: [],
      },
      showAddDelayPop: false,
      delayForm: {
        delayReason: '',
        delayDate: '',
      },
      showAuditPop: false,
      showDetailPop: false,
      orderInfo: {
        "pkId": "1957345716606349312",
        "orderStatus": "PEND",
        "origId": null,
        "dueTime": "",
        "origin": "",
        "issueCatIds": null,
        "issueCatNames": null,
        "issue": "",
        "isRevisit": "0",
        "createUserId": "1879023577495842816",
        "createUserRealName": "山西热力用户",
        "createUserCompId": "1876130557163327488",
        "createUserCompName": "山西热力",
        "assgnDeptIds": null,
        "assgnUserDeptNames": null,
        "assgnUserId": null,
        "assgnUserRealName": null,
        "createTime": "2025-08-18 15:35:58",
        "updateTime": "2025-08-18 15:35:58",
        "workerId": null,
        "workerName": null,
        "rqdyStatus": "NO",
        "delayTime": null,
        "orderStatusName": "待分配",
        "originName": null,
        "cus": {
          "orderId": "1957345716606349312",
          "cusName": "",
          "cusGender": "1",
          "cusMobileNo": "",
          "cusProv": "山西省",
          "cusCity": "太原市",
          "cusDist": "",
          "cusProvCode": "140000",
          "cusCityCode": "140100",
          "cusDistCode": "",
          "cusComm": "",
          "cusAddress": "",
          "isTriSvcComm": "0",
          "hetAcctNum": null,
          "handleId": null
        },
        "repr": {
          "orderId": "1957345716606349312",
          "reprName": "",
          "reprGender": "1",
          "reprMobileNo": "134",
          "reprCallCount": null,
          "reprCompCount": null
        },
        "opspl": {
          "pkId": "1",
          "orderId": "1957345716606349312",
          "taskNum": null,
          "eventDesc": "运管工单",
          "address": null,
          "coordinateX": null,
          "coordinateY": null,
          "lontitude": null,
          "latitude": null,
          "eventSrcId": null,
          "eventSrcName": null,
          "districtCode": null,
          "districtName": null,
          "streetCode": null,
          "streetName": null,
          "communityCode": null,
          "communityName": null,
          "recTypeId": null,
          "recTypeName": null,
          "eventLevelId": null,
          "eventLevelName": null,
          "eventTypeCode": null,
          "eventTypeName": null,
          "mainTypeCode": null,
          "mainTypeName": null,
          "subTypeCode": null,
          "subTypeName": null,
          "humanName": null,
          "cellphone": null,
          "createTime": null,
          "newInstCondId": null,
          "newInstCondName": null,
          "opinion": null,
          "partCode": null,
          "timeAreaId": null,
          "timeAreaName": null,
          "urgentFlag": null,
          "urgentFlagName": null,
          "deadlineTime": null,
          "opHuman": null
        },
        "oprUserId": null,
        "oprUserRealName": null,
        "imgList": [
          {
            "pkId": "1953458191911370752",
            "orderId": "1953458188610453504",
            "handleId": "1953458191718432768",
            "imgPath": "http://sxrl.xuan列表.xlsx",
            "fileType": "xlsx",
            "fileName": "大陆省市区乡镇列表.xlsx"
          }
        ],
        "asgnDeptList": null
      },
      //热户号异常信息上报
      hetAcctInfo: {
        "desp": "异常热户号号",
        "cus": {
          "orderId": "1955653984999256064",
          "cusName": "业主姓名",
          "cusGender": "业主性别",
          "cusMobileNo": "",
          "cusProv": "山西省",
          "cusCity": "太原市",
          "cusDist": "",
          "cusProvCode": "140000",
          "cusCityCode": "140100",
          "cusDistCode": "",
          "cusComm": "",
          "cusAddress": "",
          "isTriSvcComm": "0",
          "hetAcctNum": "热户号",
          "handleId": null
        },
        "cusHist": {
          "orderId": "1955653984999256064",
          "cusName": "客户",
          "cusGender": null,
          "cusMobileNo": null,
          "cusProv": null,
          "cusCity": null,
          "cusDist": null,
          "cusProvCode": null,
          "cusCityCode": null,
          "cusDistCode": null,
          "cusComm": null,
          "cusAddress": null,
          "isTriSvcComm": null,
          "hetAcctNum": null,
          "handleId": null
        }
      },
      isShowHetAcctInfo: false,
      showAssignPop: false,

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      orderList: [],
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      //是否打开编辑
      openIsEdit: false,
      //是否执行分配
      openIsAssign: false,
      //是否打开沟通解决
      openIsConnect: false,
      //是否打开公司完成
      openIsCompFinish: false,
      //是否打开延期申请
      openIsDelay: false,
      //是否打开延期审核
      openIsDelayAppr: false,
      openIsReturn: false,//是否打开退回申请页面
      form: {
        pkId: undefined,
        cus: {
          cusName: "",
          cusGender: '1',
          cusMobileNo: "",
          isTriSvcComm: '0',
          cusProv: '山西省',
          cusProvCode: '140000',
          cusCity: "太原市",
          cusCityCode: "140100",
          cusDist: "",
          cusDistCode: "",
          cusComm: "",
          cusAddress: "",
        },
        repr: {
          reprName: "",
          reprGender: "1",
          reprMobileNo: "",
          reprCallCount: "",
          reprCompCount: "",
        },
        origin: "",
        issueCatIds: undefined,//issCat:[10,1001,100101]
        issueCatNames: undefined,
        dueTime: "",
        issue: "",
        isRevisit: "0",
        assgnDeptIds: undefined,//被替换掉字段
        assgnUserDeptNames: undefined,//被替换掉字段
        imgList: [
          /*{
            imgPath:undefined,
            fileType:undefined,
            fileName:undefined,
          }*/
        ],
        asgnDeptList: [
          /*{
            deptId:undefined,
            deptName:undefined,
          }*/
        ]
      },
      asgnDeptIds: undefined,
      distOptions: [],
      logicList: [
        {
          value: "1",
          label: "是"
        },
        {
          value: "0",
          label: "否"
        },
      ],
      originList: [
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "GOV",
          label: "12345"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "OPSPL",
          label: "运管平台"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CALL",
          label: "热线电话"
        },
      ],
      rqdyStatusList: [
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "NO",
          label: "未发出申请"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "PEND",
          label: "待审核"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "APPR",
          label: "审核通过"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "RJCT",
          label: "审核不通过"
        },
      ],
      orderStatusList: [
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "PEND",
          label: "待分配"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "ASSN",
          label: "已分配"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "AWAIT",
          label: "待上门"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "DONE",
          label: "已完成"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "COMM",
          label: "沟通解决"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "TIME",
          label: "已超时"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "RTN",
          label: "撤回工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CNCL",
          label: "撤销工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "COMP",
          label: "直接办理"
        },
      ],
      issCatOptions: [],//工单类型
      selIssCatArry: [],//选中的工单类型
      isSelectIssCat: true,// 用于控制el-cascader 的dom 强制刷新，解决 设置默认值后，改为其他值再改回来时，绑定数据没有发生变化
      deptOptions: undefined,//部门
      isSelDeptOptions: true,
      selDeptArry: [],

      // 表单校验
      rules: {
        /*'repr.reprName':  [
          {
            validator:(rule, value, callback)=>{
              if(!value){
                callback(new Error("主诉人姓名不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '主诉人姓名不能为空'
                });
              }else{
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur",required: true }
        ],*/
        'repr.reprMobileNo': [
          {
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("主诉人电话不能为空"))
                this.$notify.error({
                  title: '错误',
                  message: '主诉人电话不能为空'
                });
              } else {
                callback(); //成功后不传入错误参数即可
              }
            }, trigger: "blur", required: true
          }
          /*{
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
            required: true
          }*/
        ],
        'repr.reprCallCount': [
          {
            validator: (rule, value, callback) => {
              if (value && !(/^-?\d+$/.test(value))) {
                callback(new Error("电话沟通次数必须为数字值"))
                this.$notify.error({
                  title: '错误',
                  message: '电话沟通次数必须为数字值'
                });
              } else {
                callback(); //成功后不传入错误参数即可
              }
            },
            trigger: ["blur"] //trigger: ["blur", "change"]
          }
        ],
        'repr.reprCompCount': [
          {
            validator: (rule, value, callback) => {
              if (value && !(/^-?\d+$/.test(value))) {
                callback(new Error("投诉次数必须为数字值"))
                this.$notify.error({
                  title: '错误',
                  message: '投诉次数必须为数字值'
                });
              } else {
                callback(); //成功后不传入错误参数即可
              }
            },
            trigger: ["blur"] //trigger: ["blur", "change"]
          }
        ],
      },
      gsForm: {
        orderId: undefined,
        handleTime: undefined,
        descp: undefined
      },
      compForm: {
        orderId: undefined,
        descp: undefined
      },
      dyForm: {
        orderId: undefined,
        handleTime: undefined,
        descp: undefined
      },
      dyApprForm: {
        orderId: undefined,
        handleTime: undefined,
        descp: undefined
      },
      rtnForm: {
        orderId: undefined,
        descp: undefined
      },
      handleList: [],
      isOpenHandleList: false,//工单处理进度列表
      handleTypeList: [
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CRTE",
          label: "创建工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "UPD",
          label: "修改工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "ASGN",
          label: "分配工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "COMR",
          label: "沟通解决"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CFIN",
          label: "公司完成"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "DYRQ",
          label: "申请延期"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "DYPS",
          label: "延期审核通过"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "DYNPS",
          label: "延期审核不通过"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "RTN",
          label: "退回工单"
        },
        {
          raw: {
            listClass: "default",
            cssClass: ""
          },
          value: "CNCL",
          label: "撤销工单"
        },
      ],
      tableHeight: window.innerHeight,
    }
  },
  created () {
    // //debugger;
    this.getList()
    this.onInitIssCatTree();
    this.onInitDistOptions();
    this.onInitDetpOptions();
  },
  mounted () {
    window.addEventListener('resize', this.calcTableHeight); // 监听窗口变化
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.calcTableHeight); // 移除监听
  },
  methods: {
    deletePic (index, type) {
      this.fileObject[type].splice(index, 1)
    },
    changeTab () {
      if (!this.currentTab || this.currentTab == 0) {
        this.queryParams.orderStatus = undefined
      } else {
        this.queryParams.orderStatus = this.currentTab
      }
      this.handleQuery()
    },
    // 直接办理详情
    getWorkOrderHandleCfin (orderId) {
      getWorkOrderHandleCfin(orderId).then(res => {
        this.feedbackList = res.data || []
        this.feedbackList.forEach(it => {
          it.picList = it.imgList.filter(file => file.fileType == 'image')
          it.otherList = it.imgList.filter(file => file.fileType != 'image')
        })

      })
    },
    getAsgnDeptListByOrderId (orderId) {
      getAsgnDeptListByOrderId(orderId).then(res => {
        this.deptList = res.data
      })
    },
    doOperate (type, info = {}) {
      switch (type) {
        case 'addPop': // 新建表单
          // this.reset();
          this.handleCancel()
          this.showAddPop = true
          break;
        case 'edit':
          getOrderById(info.pkId).then((res) => {
            this.addForm = res.data;
            if (this.addForm.imgList) {
              this.fileObject.fileList = this.addForm.imgList
            }
            this.asgnDeptList = []
            if (!this.addForm.asgnDeptList) {
              this.addForm.asgnDeptList = []
            } else {
              this.addForm.asgnDeptList.forEach(it => {
                this.asgnDeptList.push({ id: it.deptId, label: it.deptName })
              })
            }
            this.isTriSvcCommBool = this.addForm.cus.isTriSvcComm == 1
            this.showAddPop = true
          })
          break;
        case 'feedback':
          this.initFeedback()
          this.feedbackForm = {
            orderId: info.pkId,
          }
          this.fileObject = {
            fileList: [],
            feedbackAttachList: [],
            feedbackImgList: [],
          }
          this.showAddFeedbackPop = true
          break;
        case 'handleDirectly': // 直接办理
          this.feedbackType = 'handleDirectly'
          this.initFeedback()
          this.feedbackForm = {
            orderId: info.pkId,
          }
          this.fileObject = {
            fileList: [],
            feedbackAttachList: [],
            feedbackImgList: [],
          }
          this.showAddFeedbackPop = true;
          break;
        case 'addDelay':
          this.delayForm = {
            orderId: info.pkId,
            handleTime: '',
            descp: '',
          }
          this.showAddDelayPop = true
          break;
        case 'audit': // 延期审核
          getDyRqHandleNew({ orderId: info.pkId }).then(res => {
            this.delayForm = {
              orderId: info.pkId,
              handleTime: res.data.handleTime,
              descp: res.data.descp,
            }
            this.showAuditPop = true
          })
          break;
        case 'audit_no':
          this.$confirm("确认审核不通过吗").then(() => {
            this.submitLoading = true;
            dyApprNoPassHandle({ orderId: this.delayForm.orderId }).then(res => {
              this.$alert("操作成功");
              this.handleCancel();
              this.handleQuery();
            }).finally(() => {
              this.submitLoading = false;
            });
          })
          break;
        case 'audit_pass':
          this.$confirm("确认审核通过吗").then(() => {
            this.submitLoading = true;
            dyApprPassHandle({ orderId: this.delayForm.orderId }).then(res => {
              this.$alert("操作成功");
              this.handleCancel();
              this.handleQuery();
            }).finally(() => {
              this.submitLoading = false;
            });
          })
          break;
        case 'detail':
          getOrderById(info.pkId).then(res => {
            this.orderInfo = res.data
            this.showDetailPop = true
          })
          getWorkOrderHetAcctHumExpCmp(info.pkId).then(res => {
            this.hetAcctInfo = res.data
            this.isShowHetAcctInfo = true
          })
          this.getWorkOrderHandleCfin(info.pkId)
          this.getAsgnDeptListByOrderId(info.pkId)
          break;
        case 'assignPop':
          this.addForm.pkId = info.pkId
          this.asgnDeptList = []
          this.showAssignPop = true
          break;
        case 'assign': // 分配
          if (!this.asgnDeptList || this.asgnDeptList.length === 0) {
            this.$message.error('请选择接单公司')
            return
          }

          this.asgnDeptList.forEach(it => {
            this.addForm.asgnDeptList.push({ deptId: it.id, deptName: it.label })
          })

          this.$confirm('确认提交吗？').then(() => {
            this.submitLoading = true;
            assignWkOrder({
              pkId: this.addForm.pkId,
              asgnDeptList: this.addForm.asgnDeptList
            }).then(response => {
              this.$alert("操作成功");
              this.handleCancel();
              this.handleQuery();
            }).finally(() => {
              this.submitLoading = false;
            });

          })
          break;
        default:
          break;
      }
    },
    initFeedback () {
      switch (this.feedbackType) {
        case 'handleDirectly':
          this.feedbackInit.title = "直接办理"
          this.feedbackInit.panelTitle = "工单反馈"
          this.feedbackInit.panelPlaceholder = "请输入反馈内容"
          break;
        default:
          this.feedbackInit.title = "反馈"
          this.feedbackInit.panelTitle = "备注"
          this.feedbackInit.panelPlaceholder = "请输入备注"
          break;
      }
    },
    addNewOrder () {
      console.log(this.addForm, '============')

      if (!this.addForm.repr.reprMobileNo || !this.addForm.repr.reprMobileNo.trim()) {
        this.$notify.error({ title: '错误', message: '主诉人电话不能为空' });
        return
      }

      if (this.addForm.dueTime && typeof this.addForm.dueTime === 'object') {
        this.addForm.dueTime = this.addForm.dueTime.format('yyyy-MM-dd HH:mm:ss')
      }
      this.addForm.imgList = this.fileObject.fileList

      this.addForm.cus.isTriSvcComm = this.isTriSvcCommBool ? '1' : '0'

      if (this.asgnDeptList && this.asgnDeptList.length > 0) {
        this.asgnDeptList.forEach(it => {
          this.addForm.asgnDeptList.push({ deptId: it.id, deptName: it.label })
        })
      }

      if (this.submitLoading) return
      this.submitLoading = true

      updateWkOrder(this.addForm).then(response => {
        this.$alert("操作成功");
        this.handleCancel();
        this.handleQuery();
      }).finally(() => {
        this.submitLoading = false;
      });
    },
    addFeedback () {
      this.feedbackForm.imgList = this.fileObject.feedbackImgList
      console.log(this.feedbackForm, 'feedback', this.fileObject)
      switch (this.feedbackType) {
        case 'handleDirectly':
          this.$confirm('确认提交吗？').then(() => {
            this.submitLoading = true;
            compHandle(this.feedbackForm).then(response => {
              this.$alert("操作成功");
              this.handleCancel();
              this.handleQuery();
            }).finally(() => {
              this.submitLoading = false;
            });
          })
          break;
        default:

          break;
      }
    },
    addDelay () {
      console.log(this.delayForm)
      this.$confirm('确认提交吗？').then(() => {
        this.submitLoading = true;
        dyrqHandle(this.delayForm).then(response => {
          this.$alert("操作成功");
          this.handleCancel();
          this.handleQuery();
        }).finally(() => {
          this.submitLoading = false;
        });

      })
    },
    handleInput (value, type) {
      if (value < 0) {
        this.$notify.error({
          title: '错误',
          message: '次数必须为数字值'
        });
      }
    },
    calcTableHeight () {
      // 确保 DOM 已经渲染完成
      this.$nextTick(() => {
        const windowHeight = window.innerHeight;

        const navbarHeight = document.getElementsByClassName('navbar')[0].offsetHeight;
        console.log('元素高度（包含边框）navbarHeight:', navbarHeight);

        const tagsViewHeight = document.getElementById('tags-view-container').offsetHeight;

        const queryHeight = document.getElementsByClassName('el-form el-form--inline')[0].offsetHeight;
        console.log('元素高度（包含边框）queryHeight:', queryHeight);

        const rowEL = document.getElementsByClassName('mb8 el-row')[0];
        let rowHeight = rowEL.offsetHeight;
        console.log('元素高度（包含边框）rowHeight:', rowHeight);

        const rowStyle = window.getComputedStyle(rowEL);
        const rowBottom = parseFloat(rowStyle.marginBottom);
        console.log('元素高度（包含边框）rowBottom:', rowBottom);
        rowHeight = rowHeight + rowBottom;

        const conEL = document.getElementsByClassName('app-container')[0];
        const conStyle = window.getComputedStyle(conEL);
        const conPaddingTop = parseFloat(conStyle.paddingTop);
        console.log('元素高度（包含边框）conPaddingTop:', conPaddingTop);
        const conPaddingBottom = parseFloat(conStyle.paddingBottom);
        console.log('元素高度（包含边框）conPaddingBottom:', conPaddingBottom);
        let conHeight = conPaddingTop + conPaddingBottom;

        //使用 this.$refs 访问组件，并通过 $el 获取其根 DOM 元素
        const pageEl = this.$refs.pageRef.$el;
        let pageElHeight = 0;
        if (pageEl) {
          // 获取高度（包含边框和内边距）
          const heightWithBorder = pageEl.offsetHeight;
          // 获取高度（仅内边距，不包含边框）
          const heightWithoutBorder = pageEl.clientHeight;
          console.log('元素高度（包含边框）:', heightWithBorder);
          console.log('元素高度（不包含边框）:', heightWithoutBorder);

          const style = window.getComputedStyle(pageEl);
          const pageMarginTop = parseFloat(style.marginTop);
          const pageMarginBottom = parseFloat(style.marginBottom);
          pageElHeight = pageEl.offsetHeight + pageMarginTop + pageMarginBottom;
          console.log('元素高度（包含边框和 margin）:', pageElHeight);

        }

        this.tableHeight = windowHeight - navbarHeight - tagsViewHeight - queryHeight - rowHeight - conHeight - pageElHeight;
      })
    },

    getList () {
      this.loading = true;
      listOrder(this.queryParams).then((res) => {
        this.orderList = res.data;
        this.total = Number(res.total);
      }).finally(() => {
        this.loading = false;
        //放在list查询之后，防止并发执行
        this.calcTableHeight();
      });
    },

    /**
     * 初始化 区县 select
     */
    onInitDistOptions () {
      getDistListByCityCode(this.form.cus.cusCityCode).then((res) => {
        //debugger;
        this.distOptions = []
        let list = res.data;
        for (let i = 0; i < list.length; i++) {
          let obj = list[i]
          let item = {
            value: obj.adCode,
            label: obj.adName
          }
          this.distOptions.push(item);
        }

      })
    },
    /**
     * 初始化 问题分类 树
     */
    onInitIssCatTree () {
      getWkoIssCatTree().then((res) => {
        let issCatList = res.data;
        // 通过props 实现 就可以不用转换
        // 我之所以要转换 是因为 返回的对象中children 没有数据时 不是一个空对象，这样的就会显示一个空的叶子节点
        this.issCatOptions = this.onWkoIssCatTreeTran(res.data)

      })
    },

    /**
     * 初始化部门树
     */
    onInitDetpOptions () {
      /*getDetpTree().then( (res)=>{
        let deptTreeList= res.data;
        this.deptOptions=this.onDeptTreeTran(deptTreeList);
      })*/
      deptCompTreeCurUser().then(response => {
        //debugger;
        this.deptOptions = response.data;
      });
    },
    onDeptTreeTran (deptTreeList) {
      let options = [];
      for (let i = 0; i < deptTreeList.length; i++) {
        let obj = deptTreeList[i]

        let item = {
          value: obj.pkId,
          label: obj.deptName
        }

        if (obj.children.length > 0) {
          let child = [] = this.onDeptTreeTran(obj.children)
          item.children = child;
        }
        options.push(item)
      }
      return options;
    },

    onWkoIssCatTreeTran (issCatList) {
      let issCatOptions = [];
      for (let i = 0; i < issCatList.length; i++) {
        let obj = issCatList[i]

        let item = {
          value: obj.pkId,
          label: obj.catName
        }

        if (obj.children.length > 0) {
          let child = [] = this.onWkoIssCatTreeTran(obj.children)
          item.children = child;
        }
        issCatOptions.push(item)
      }
      return issCatOptions;
    },

    // 表单重置
    reset () {
      /*this.form = {
        prodImg:undefined,
        cateItemValues:[],
        districtValues:[],
        projValuesAry:[],
        urgentStatus:0,
        prodNum:undefined,
        workPrice:undefined
      };*/
      this.feedbackForm = this.$options.data().feedbackForm
      this.addForm = this.$options.data().addForm
      this.form = this.$options.data().form
      this.asgnDeptIds = this.$options.data().asgnDeptIds
      this.selIssCatArry = this.$options.data().selIssCatArry
      this.selDeptArry = this.$options.data().selDeptArry
      this.resetForm("form");
    },

    /** 新增按钮操作 */
    handleAdd () {
      /*let accessToken=getToken()
      let url=encodeURI('http://localhost/call/wkorder/add?cusName=业主&accessToken='+accessToken)

      let url = encodeURI('http://sxrl.xuanhe.cc/call/wkorder/add?cusName=业主&accessToken=xxxx')
      window.open(url);
      return;*/
      //debugger;
      this.reset();
      this.open = true;
      this.openIsEdit = true;
      this.title = "新增";
      //this.selIssCatArry=['10','1001','100101'] //默认值需要设置为字符串


    },

    handleChangeDist (value) {
      //debugger;
      console.log("选中的值：", value);
      //let label = this.$refs.distSelRef.selected.label;//获取的是改变之前的值
      //this.form.cus.cusDist=label;
      //let value= this.$refs.distSelRef.selected.value;

      this.form.cus.cusDist = this.distOptions.find(item => item.value === value).label;
    },
    handleChangeIssCat (value) {
      //debugger;
      this.isSelectIssCat = false;
      if (!!value && value.length > 0) {
        let issCat = []
        for (let i in value) {
          issCat.push(value[i])
        }
        this.selIssCatArry = issCat
        this.form.issueCatIds = this.selIssCatArry.join(',');
        let nodesInfo = this.$refs[`issCatOptionsRef`].panel.getNodeByValue(value)
        if (nodesInfo && nodesInfo.pathLabels && nodesInfo.pathLabels.length > 0) {
          this.form.issueCatNames = nodesInfo.pathLabels.join(',');
        }
      } else {
        this.form.issueCatIds = undefined;
        this.form.issueCatNames = undefined;
      }
      //debugger;
      this.isSelectIssCat = true;
    },
    handleChangeDeptOptions (value) {
      //debugger;
      this.isSelDeptOptions = false;
      if (!!value && value.length > 0) {
        let depts = []
        for (let i in value) {
          depts.push(value[i])
        }
        this.selDeptArry = depts
        this.form.assgnDeptIds = this.selDeptArry.join(',');
        let nodesInfo = this.$refs[`deptOptionsRef`].panel.getNodeByValue(value)
        if (nodesInfo && nodesInfo.pathLabels && nodesInfo.pathLabels.length > 0) {
          this.form.assgnUserDeptNames = nodesInfo.pathLabels.join(',');
        }
      } else {
        this.form.assgnDeptId = undefined;
        this.form.assgnUserDeptName = undefined;
      }
      this.isSelDeptOptions = true;
    },

    handleSelectDeptTree (node) {
      console.log(node, 'node')
      ////debugger;
      //this.form.assgnUserDeptNames = node.label
    },
    /*handleClearDeptTree(){
      //debugger;
      this.form.assgnUserDeptNames=undefined;
    },
*/
    // 取消按钮
    handleCancel () {
      //debugger;
      this.open = false;
      this.openIsEdit = false;
      this.openIsAssign = false;
      this.openIsConnect = false;
      this.openIsCompFinish = false;
      this.openIsDelay = false;
      this.openIsDelayAppr = false;
      this.openIsReturn = false;
      this.showAddPop = false
      this.showAddFeedbackPop = false
      this.fileObject = {
        fileList: [],
        feedbackAttachList: [],
        feedbackImgList: [],
      }
      this.showAddDelayPop = false
      this.showAuditPop = false
      this.asgnDeptList = []
      this.showDetailPop = false
      this.showAssignPop = false
      this.reset();
    },

    handleChangeCreatedDate (value) {
      //debugger;
      this.queryParams.crtDateStartStr = undefined;
      this.queryParams.crtDateEndStr = undefined;
      if (value) {
        this.queryParams.crtDateStartStr = value[0];
        this.queryParams.crtDateEndStr = value[1];
      }
      console.log(value)
    },
    handleChangeQueryIssCat (value) {
      if (!!value && value.length > 0) {
        let issCat = []
        for (let i in value) {
          issCat.push(value[i])
        }
        this.queryParams.issueCatIds = issCat.join(',');
      } else {
        this.queryParams.issueCatIds = undefined;
      }
    },
    /** 搜索按钮操作 */
    handleQuery () {
      //debugger;
      this.queryParams.pageNum = 1;
      console.log(this.queryParams.orderStatus, '')
      switch (this.queryParams.orderStatus) {
        case "PEND":
        case "RTN":
        case "ASSN":
        case "DONE":
          this.currentTab = this.queryParams.orderStatus
          break;
        default:
          this.currentTab = '0'
          break;
      }
      this.getList();
    },
    resetQuery () {
      this.resetForm("queryForm");
      //this.handleQuery();
    },

    handleDateChange (value) {
      //debugger;
      if (value) {
        this.form.dueTime = this.formatDate(value);
      }
    },
    formatDate (date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },

    // 更多操作触发
    handleCommand (command, row) {
      switch (command) {
        case "handleConnect":
          this.handleConnect(row);
          break;
        case "handleUpdate":
          this.handleUpdate(row);
          break;
        case "handleAssign": // 分配工单
          // this.handleAssign(row);
          this.doOperate('assignPop', row)
          break;
        case "handleCompFinish": // 直接完成
          // this.handleCompFinish(row);
          this.doOperate('handleDirectly', row)
          break;
        case "handleDelay": // 申请延期
          // this.handleDelay(row);
          this.doOperate('addDelay', row)
          break;
        case "handleDelayAppr":
          // this.handleDelayAppr(row);
          this.doOperate('audit', row)
          break;
        case "handleRowCancel":
          this.handleRowCancel(row);
          break;
        case "handleReturn":
          this.handleReturn(row);
          break;
        case "handleEffective":
          this.handleEffective(row)
          break;
        default:
          break;
      }
    },
    /**
     * 详情按钮
     * @param row
     */
    handlePreview (row) {
      this.openIsEdit = false;
      this.getFormData(row);
    },

    handleUpdate (row) {
      this.openIsEdit = true;
      //this.handlePreview(row);
      this.getFormData(row);
    },
    handleAssign (row) {
      this.openIsAssign = true;
      //this.handlePreview(row);
      this.getFormData(row).then(() => {

        this.scrollToAnchor("assgnRowRef");
      });
    },
    scrollToAnchor (anchorRef) {
      this.$nextTick(() => { //确保 DOM 已经完全渲染完毕后再执行滚动操作。
        // 等待对话框渲染后，滚动到锚点
        /*const target = document.getElementById("targetAnchor");
        if (target) {
          target.scrollIntoView({ behavior: "smooth" }); // 平滑滚动到锚点
        }*/
        //debugger;
        const targetElement = document.getElementById(anchorRef);
        ;//this.$refs[anchorRef];
        if (targetElement) {
          targetElement.scrollIntoView({
            behavior: 'smooth', // 平滑滚动
            block: 'start' // 对齐到视口的顶部
          });
        } else {
          console.error(`找不到引用为 ${anchorRef} 的元素`);
        }
      });


    },

    /**
     * 沟通解决
     * @param row
     */
    handleConnect (row) {
      //this.handlePreview(row);
      this.openIsConnect = true;
      this.getFormData(row).then(() => {
        this.scrollToAnchor("assgnRowRef");
      });
    },
    handleCompFinish (row) {
      this.openIsCompFinish = true;
      this.getFormData(row).then(() => {
        this.scrollToAnchor("assgnRowRef");
      });
    },
    handleDelay (row) {
      this.openIsDelay = true;
      this.getFormData(row).then(() => {
        this.scrollToAnchor("assgnRowRef");
      });
    },
    handleDelayAppr (row) {
      this.openIsDelayAppr = true;
      //查询最新的延期申请记录
      let data = {
        orderId: row.pkId
      }
      //debugger;
      this.getFormData(row).then(() => {
        getDyRqHandleNew(data).then((res) => {
          this.dyApprForm = res.data;
        })
        this.scrollToAnchor("assgnRowRef");
      });

    },

    handleRowCancel (row) {
      this.$confirm('确认撤销工单 ' + row.pkId + " ?")
          .then(_ => {
            let data = { "orderId": row.pkId };
            cancelHandle(data).then(response => {
              this.$alert("操作成功");
              this.getList();
            })
          })
          .catch(_ => {});
    },
    handleReturn (row) {
      this.openIsReturn = true;
      //查询最新的延期申请记录
      let data = {
        orderId: row.pkId
      }
      this.getFormData(row).then(() => {

        this.scrollToAnchor("assgnRowRef");
      });

    },
    //有效工单 todo
    handleEffective (row) {

    },

    /*getFormData(row){
      const pkId=row.pkId;
      getOrderById(pkId).then( (res)=>{
          this.form = res.data;
          this.open = true;
          this.title = "工单信息";
          if(this.form.issueCatIds){
            this.selIssCatArry=this.form.issueCatIds.split(",")
          }
      });
    },*/
    getFormData (row) {
      return new Promise((resolve, reject) => {

        const pkId = row.pkId;
        getOrderById(pkId).then((res) => {
          this.form = res.data;
          this.open = true;
          this.title = "工单信息";
          if (this.form.issueCatIds) {
            this.selIssCatArry = this.form.issueCatIds.split(",")
          }
          if (!this.form.assgnDeptIds) {
            this.form.assgnDeptIds = undefined;
          }

          resolve()

        });

      })
    },

    onSubmit () {

      let _this = this;
      //let data = this.form;
      this.$confirm('确认提交吗？')
          .then(_ => {


            this.$refs["form"].validate(valid => {
              if (!valid) {
                return;
              }

              this.submitLoading = true;

              /*if(!this.form.assgnDeptIds){//部门组件清除后，没有清除名称，在这里添加清除逻辑
               this.form.assgnUserDeptNames=undefined;
             }*/
              //debugger;
              if (this.asgnDeptIds) {//如果存在分配的部门
                this.form.asgnDeptList = [];
                for (let i = 0; i < this.asgnDeptIds.length; i++) {
                  let data = {
                    deptId: this.asgnDeptIds[i]
                  }
                  this.form.asgnDeptList.push(data);
                }
              }

              let data = this.form;

              //debugger;
              updateWkOrder(data).then(response => {
                this.$alert("操作成功");
                this.handleCancel();
                this.handleQuery();
              }).finally(() => {
                this.submitLoading = false;
              });
            })


          })
          .catch(_ => {});
    },
    onAssign () {
      this.$confirm('确认提交吗？').then(() => {
        this.submitLoading = true;
        if (!this.form.assgnDeptIds) {//部门组件清除后，没有清除名称
          this.form.assgnUserDeptNames = undefined;
        }
        let data = {
          assgnDeptIds: this.form.assgnDeptIds,
          assgnUserDeptNames: this.form.assgnUserDeptNames,
          pkId: this.form.pkId
        }
        assignWkOrder(data).then(response => {
          this.$alert("操作成功");
          this.handleCancel();
          this.handleQuery();
        }).finally(() => {
          this.submitLoading = false;
        });

      })
    },
    onConnect () {
      this.$confirm('确认提交吗？').then(() => {
        this.submitLoading = true;

        this.gsForm.orderId = this.form.pkId
        gsHandle(this.gsForm).then(response => {
          this.$alert("操作成功");
          this.handleCancel();
          this.handleQuery();
        }).finally(() => {
          this.submitLoading = false;
        });

      })
    },
    onCompFinish () {
      this.$confirm('确认提交吗？').then(() => {
        this.submitLoading = true;

        this.compForm.orderId = this.form.pkId
        compHandle(this.compForm).then(response => {
          this.$alert("操作成功");
          this.handleCancel();
          this.handleQuery();
        }).finally(() => {
          this.submitLoading = false;
        });

      })
    },
    onDelayReq () {
      this.$confirm('确认提交吗？').then(() => {
        this.submitLoading = true;

        this.dyForm.orderId = this.form.pkId
        dyrqHandle(this.dyForm).then(response => {
          this.$alert("操作成功");
          this.handleCancel();
          this.handleQuery();
        }).finally(() => {
          this.submitLoading = false;
        });

      })
    },

    onDelayAppr (appr) {

      let msg = appr == '1' ? "确认审核通过吗" : "确认审核不通过吗";
      this.$confirm(msg).then(() => {
        this.submitLoading = true;

        this.dyApprForm.orderId = this.form.pkId
        if (appr == '1') {
          dyApprPassHandle(this.dyApprForm).then(response => {
            this.$alert("操作成功");
            this.handleCancel();
            this.handleQuery();
          }).finally(() => {
            this.submitLoading = false;
          });
        } else {
          dyApprNoPassHandle(this.dyApprForm).then(response => {
            this.$alert("操作成功");
            this.handleCancel();
            this.handleQuery();
          }).finally(() => {
            this.submitLoading = false;
          });
        }

      })
    },
    onReturn () {
      this.$confirm('确认退回吗？').then(() => {
        this.submitLoading = true;

        this.rtnForm.orderId = this.form.pkId
        returnHandle(this.rtnForm).then(response => {
          this.$alert("操作成功");
          this.handleCancel();
          this.handleQuery();
        }).finally(() => {
          this.submitLoading = false;
        });

      })
    },

    onViewHandleList (orderId) {
      let data = {
        orderId: orderId,
      }
      this.isOpenHandleList = true;
      getHandleList(data).then((res) => {
        this.handleList = res.data;
      });
    },
    handleCancelViewHandleList () {
      this.isOpenHandleList = false;
      this.handleList = []
    },

    //========行按钮显示控制 start======
    hasRowBtnEdit (row) {//修改
      let isShow = row.orderStatus != 'DONE' && row.orderStatus != 'CNCL'
      return isShow;
    },
    hasRowBtnAssign (row) {//分配
      let isShow = row.orderStatus != 'DONE' && row.orderStatus != 'CNCL'
      return isShow;
    },
    hasRowBtnConnect (row) {//沟通解决
      let isShow = row.orderStatus != 'DONE' && row.orderStatus != 'CNCL'
      return isShow;
    },
    hasRowBtnCompFinish (row) {
      let isShow = row.orderStatus != 'DONE' && row.orderStatus != 'CNCL';
      return isShow;
    },
    hasRowBtnDelay (row) {
      let isShow = row.orderStatus != 'DONE' && row.orderStatus != 'CNCL' && row.rqdyStatus != 'PEND'
      return isShow;
    },
    hasRowBtndDelayAppr (row) {
      let isShow = row.orderStatus != 'DONE' && row.orderStatus != 'CNCL' && row.rqdyStatus == 'PEND'
      return isShow;
    },
    hasRowBtndCancel (row) {
      let isShow = (row.orderStatus != 'DONE' && row.orderStatus != 'CNCL')
      return isShow;
    },
    hasRowBtndReturn (row) {
      let isShow = (row.orderStatus != 'DONE' && row.orderStatus != 'CNCL' && !!row.assgnDeptIds)
      return isShow;
    },
    hasRowBtnEffective (row) {
      let isShow = (row.orderStatus == 'DONE')
      return isShow;
    },
    hasRowBtnMore (row) {//更多
      return this.hasRowBtnEdit(row)
          || this.hasRowBtnAssign(row)
          || this.hasRowBtnConnect(row)
          || this.hasRowBtnCompFinish(row)
          || this.hasRowBtnDelay(row)
          || this.hasRowBtndDelayAppr(row)
          || this.hasRowBtndCancel(row)
          || this.hasRowBtndReturn(row)
          || this.hasRowBtnEffective(row)
    },

    //========行按钮显示控制 end======
    handleExport () {
      this.download('sxtyht-worder/wkOrder/exportWkOrder', {
        ...this.queryParams
      }, `工单_${new Date().format('yyyy年MM月dd日hh时mm分ss秒')}.xlsx`)
    },

    //==========上传===============
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制最多上传一张图片`)
    },
    beforeAvatarUpload (file) {
      let isJPG = false
      let isLt30M = file.size / 1024 / 1024 < 30
      /*if (
          file.type === 'image/jpeg' ||
          file.type === 'image/png' ||
          file.type === 'image/jpg'
      ) {
        isJPG = true
      } else {
        isJPG = false
      }
      if (!isJPG) {
        this.$message.error('上传图片只能是 jpg/jpeg/png 格式!')
      }*/
      if (!isLt30M) {
        this.$message.error('上传图片大小不能超过 30M!')
      }
      return /*isJPG &&*/ isLt30M
    },
    handleSuccessImg (response, file, fileList, from) {
      this.imageUploading = false;
      if (response.code === 200) {
        let img = {
          imgPath: response.data.url,
          fileType: response.data.fileType,
          fileName: response.data.fileName,
        }
        this.fileList.push(img);

        this.fileObject[from].push(img)
        switch (from) {
          case 'fileList':
            break;
          case 'feedbackImgList':
            break;
          case 'feedbackAttachList':
            break;
          case '':
            break;
          default:
            break;
        }
        console.log(this.fileObject, '==fileObject===')
      } else {
        this.$message.error('上传失败，请重试');
      }
    },
    handleProcessImg (event, file, fileList) {    //注意在data中添加对应的变量名
      this.imageUploading = true
      this.imageUploadPercent = file.percentage.toFixed(0) * 1
    },
    handleRemove (file, fileList) {

    },

  }
}

</script>
<style lang="scss" scoped>
/*::v-deep ::-webkit-scrollbar {
  height: 10px; !* 设置滚动条高度 *!
}*/
/* 修改当前组件的 el-table 横向滚动条样式 */
::v-deep .el-table__body-wrapper::-webkit-scrollbar {
  height: 10px; /* 增加滚动条高度 默认是6px*/
}

::v-deep .el-table__fixed-right {
  //height: 100% !important;
  //height: auto !important;
  bottom: 9px !important;
}

//解决 开启fixed(固定的列)之后横纵滚动的时候，出现列错位的情况
::v-deep .el-table__fixed-body-wrapper {
  bottom: 2px !important;
}

/*::v-deep .el-table__body-wrapper {
  //z-index: 10; !* 确保滚动条在固定列之上 *! //会导致操作列的内容被覆盖
}*/
//解决 开启fixed(固定的列)之后横纵滚动的时候，出现列错位的情况
/*::v-deep .el-scrollbar__wrap::-webkit-scrollbar {
  //width: 8px; //纵向滚动条的宽度
  height: 10px; //横向滚动条的高度
}*/
////////////////////////////////////////////////

::v-deep .el-statistic { //覆盖 类别 倒计时
  .con {
    .number {
      font-size: 14px;
    }
  }
}

/***上传**/
::v-deep.thmb-uploader .el-upload {
  border: 1px dashed #D9D9D9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

::v-deep.thmb-uploader .el-upload:hover {
  border-color: #409EFF;
}

.thmb-img {
  width: 100px;
  height: 100px;
  display: block;
  margin: 10px;
}

.thmb-uploader:hover .el-icon-circle-close {
  visibility: visible;
}

.el-icon-circle-close {
  /*display: flex;
  float: right;
  margin-right: 6px;*/
  right: 2px;
  color: #959bcb;
  font-size: 30px;
  visibility: hidden;
  position: absolute;
  z-index: 99;
}

.thmb-img-progress {
  left: 0px;
  //right: 0px;
  //bottom:0px;
  //top:0px;
  position: absolute;
}

.thmb-uploader-icon {
  font-size: 28px;
  color: #8C939D;
  width: 100px;
  height: 100px;
  line-height: 108px;
  text-align: center;
  margin: 10px;
}

</style>
